<template>
  <div class="chart-content-wrapper"
       @mouseenter="mouseenter()"
       @mouseleave="mouseleave()">
    <!-- 头部筛选和标题 -->
    <top-filter :title="reportName" ref="topFilter">
      <single-list-filter-without-cb :filter="filterN"
                                     :type="'threeYears'"
                                     @confirmSingleSelect="chooseYear"
                                     ref="yearsFilter">
      </single-list-filter-without-cb>
    </top-filter>
    <!-- 详情 -->
    <div class="content" v-show="isShowChart" style="height: 400px; overflow: visible;">
      <div class="two-chart-left height-percent-90">
        <div class="chart-container">
          <div class="four-chart-mini-title ">
            <span>人员类别分布</span>
            <span class="title-bk-container"></span>
          </div>
          <div id="people-category-distribution-id" class="chart-type1"></div>
        </div>
      </div>

      <div class="two-chart-right height-percent-90">
        <div class="chart-container">
          <div class="four-chart-mini-title">
            <span>求职登记来源分布</span>
            <span class="title-bk-container"></span>
          </div>
          <div id="source-distribution-job-id" class="chart-type1"></div>
        </div>
      </div>

      <div class="colligateChart-go-next" style="margin: 0 auto" @click="goToNext">
        人才简历信息表  >>
      </div>
    </div>
  </div>
</template>

<script>

  import TopFilter from '../../last/filter/top-filter1'
  import SingleListFilterWithoutCb from '../../last/filter/single-list-filter-without-checkbox.vue'
  import {loadingOpt} from '../../../assets/js/utils'

  import {getSearchItems, getQueryDemandCategory, getQueryDemandSource} from '../../../api/api'

  export default {

    props: ['isChange', 'fullScreen', 'isCollapse',],
    data () {
      return {
        reportName: '求职人员分析',
        filterN: null,
        isShowChart: true,
        queryYear: ''
      }
    },
    components: {
      TopFilter,
      SingleListFilterWithoutCb
    },
    watch: {
      isChange () {
        setTimeout(() => {
          setTimeout(() => {
            this.resizeMyChart();
          }, 1)
        }, 211)
      },
      fullScreen() {
        setTimeout(() => {
          setTimeout(() => {
            this.resizeMyChart();
          }, 1)
        }, 211)
      }
    },
    mounted () {
      this.initMyChart();
      this.initFilter();
    },
    methods: {
      initFilter () {
        getSearchItems('init/initInput')
          .then((res) => {
            if (res.code == 0) {
              this.filterN = JSON.parse(JSON.stringify(res.data));
              this.queryYear = res.data.years[0];
              this.getData();
            }
          });
      },
      initMyChart () {
        this.peopleCategoryDistribution = this.$echarts.init(document.getElementById('people-category-distribution-id'));
        this.sourceDistributionJob = this.$echarts.init(document.getElementById('source-distribution-job-id'));
      },
      resizeMyChart () {
        if (this.peopleCategoryDistribution) {
          this.peopleCategoryDistribution.resize();
        }
        if (this.sourceDistributionJob) {
          this.sourceDistributionJob.resize();
        }
      },
      clearMyChart () {
        this.peopleCategoryDistribution.clear();
        this.sourceDistributionJob.clear();
      },
      loadingMyChart (val) {
        if (val) {
          this.peopleCategoryDistribution.showLoading(loadingOpt);
          this.sourceDistributionJob.showLoading(loadingOpt);
        } else {
          this.peopleCategoryDistribution.hideLoading();
          this.sourceDistributionJob.hideLoading();
        }
      },
      getData () {
        this.clearMyChart();
        this.loadingMyChart(true);


        getQueryDemandCategory('hr/queryDemandCategory', this.queryYear)
          .then((respone) => {
            if (respone.code == 0){

              let data = respone.data;
              this.drawPeopleCategoryDistribution(data);

            //  发送请求
              getQueryDemandSource('hr/queryDemandSource', this.queryYear)
                .then( (params) => {
                  if (params.code == 0) {
                    this.showChart = true;
                    this.loadingMyChart(false);

                    this.drawSourceDistributionJob(params.data);
                  } else {
                    this.showChart = false;
                  }
                });
            } else {
              this.showChart = false;
            }
          });


      },
      chooseYear (year) {
        this.queryYear = year;
        this.getData();
      },
      goToNext() {
        this.$router.push({path: '/humanResources/resume-information', query: {year: this.queryYear}})
      },
      // 人员类别分布
      drawPeopleCategoryDistribution (json) {

        let xData = [];
        let number = [];
        let numberRatio = [];

        json.map((item) => {
          if (item.title) {
            xData.push(item.title);
            number.push(item.demand_count);
            let rate = (Number(item.demand_rate) * 100).toFixed(2);
            numberRatio.push(rate);
          }
        });

        let xAxisData = [];
        xData.forEach((item, idx) => {
          if (item) {
            let temp = item && this.filterLogText(item);
            xAxisData.push(temp)
          }
        });


        let option = {
          grid: {
            top: 40,
            left: 120,
            right: 40,
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            },
            textStyle: {
              fontSize: 12
            },
            formatter: function (params) {
              let i = params[0].dataIndex;
              let text = `<p>${xData[i]}</p>
                          <p>求职人数: ${number[i]}人</p>
                          <p>占比: ${numberRatio[i]}%</p>`;
              return text;
            },
          },
          xAxis: {
            show: false,
          },
          yAxis: {
            inverse: true,
            data: xAxisData,
            axisLine: {
              show: true,
              color: '#2a4565',
            },
            axisTick: {
              show: false,
              color: '#fff',
            },
            axisLabel: {
              show: true,
              interval: 0,
              textStyle: {
                color: '#fff',
                lineHeight: 18,
              },
            }
          },
          series: [{
            type: 'bar',
            data: number,
            stack: 'age',
            color: '#3281fd',
            barWidth: '40%',
            barMaxWidth: 30,
            label: {
              show: true,
              position: 'right',
              color: '#fff',
              formatter: function (param) {
                return param.data;
              }
            }
          }]
        };

        this.peopleCategoryDistribution.setOption(option);
      },
      // 求职登记来源分布
      drawSourceDistributionJob(json) {
        let xAxisData = [];
        let originalXData = [];
          let number = [];
        let numberRatio = [];

        json.map((item) => {
          if (item && item.title) {

            let tempTitle = '';
            if (item.title.length > 4) {
              tempTitle = item.title.substring(0, 2) + '\n' + item.title.substring(2, item.title.length );
            } else {
              tempTitle = item.title;
            }

            originalXData.push(item.title);
            xAxisData.push(tempTitle);
            number.push(item.demand_money);
            let rate = (Number(item.demand_rate) * 100).toFixed(2);
            numberRatio.push(rate);
          }
        });

        let that = this;
        let option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'none'
            },
            formatter: function (params) {
              let index = params[0].dataIndex;
              let txt = `<p style="color: #fff; font-size: 12px">${originalXData[index]}</p>`
                + `<p style="color: #fff; font-size: 12px">求职人数：${number[index]}人</p>`
                + `<p style="color: #fff; font-size: 12px">占比：${numberRatio[index]}%</p>`;
              return txt;
            },
          },
          grid: {
            left: '10%',
            top: '10%'
          },
          xAxis: {
            data: xAxisData,
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#fff'
              }
            }
          },
          yAxis: {
            splitLine: {show: false},
            axisTick: {show: false},
            axisLine: {show: false},
            axisLabel: {show: false}
          },
          color: ['#32cfe8'],
          series: [{
            barMinHeight: 5,
            name: 'hill',
            type: 'pictorialBar',
            barCategoryGap: '-100%',
            symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            itemStyle: {
              normal: {
                opacity: 0.6
              },
              emphasis: {
                opacity: 1
              }
            },
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                let index = params.dataIndex;
                return `${number[index]}`
              },
              color: '#fff'
            },
            data: number,
          }]
        };

        this.sourceDistributionJob.setOption(option);
      },
      // 字数太长省略
      filterLogText (value, leng = 7) {
        if (value.length <= leng) {
          return value;
        } else {
          return value.slice(0, leng) + '...';
        }
      },
      mouseenter () {
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave () {
        this.$refs.topFilter._showChartTitle()
      },
    }

  }
</script>

<style scoped>

  /* css 引用 */
  @import '../../../assets/css/decision.css';
  /* 必须在decision 下*/
  @import '../../../assets/css/portrait-personk-detail.css';
  .height-percent-90 {
    height: 90%
  }
</style>
